<template>
  <div v-if="list.length>0" class="show-image-list">
    <el-image v-for="(src,index) in list" :key="index" preview-teleported :preview-src-list="list" :src></el-image>
  </div>
</template>
<script lang="ts">
import {defineComponent, computed, PropType} from "vue"

export default defineComponent({
  name: 'ShowImageList',
  props: {
    images: {
      type: Array as PropType<string[]>,
      required: true
    }
  },
  setup(props) {
    const list = computed(() => {
      let src = []
      for (let img of props.images) {
        if (img) src.push(img)
      }
      return src
    })
    return {list}
  }
})
</script>
<style scoped lang="scss">
.show-image-list {
  .el-image {
    margin-right: 5px;
    width: auto;
    height: 45px;
    border: 1px solid var(--el-card-border-color);
    border-radius: 4px;
    box-shadow: 0 0 0 1px var(--el-card-border-color);
  }
}
</style>
